<template>
    <div>
        <div class="ui-title">
            <div class="ui-title-back" onclick="window.hideWebview()"></div>
            <div class="ui-title-text">八卦排盘</div>
            <div class="ui-title-btn-block">
                <!--<span class="ui-title-btn icon " onclick="location.reload();">&#xe62a;</span>-->
            </div>
        </div>
        <div class="body paipan-body">
            <div class="paipan-time">{{dateStr}} [{{guaType}}]</div>
            <div class="paipan-gz">
                {{ganZhi.gzYear}}年 {{ganZhi.gzMonth}}月 {{ganZhi.gzDay}}日 {{ganZhi.gzHour}}时
            </div>

            <div class="gua-block">
                <div class="gua">
                    <div class="title title2">[本卦]</div>
                    <div class="title">{{benGua.title}}</div>
                    <div class="hua icon-gua" v-html="benGua.hua"></div>
                </div>
                <div class="gua">
                    <div class="title  title2">[互卦]</div>
                    <div class="title">{{huGua.title}}</div>
                    <div class="hua icon-gua" v-html="'&#xe6' +huGua.number"></div>
                </div>
                <div class="gua">
                    <div class="title  title2">[变卦]</div>
                    <div class="title">{{bianGua.title}}</div>
                    <div class="hua icon-gua" v-html="bianGua.hua"></div>
                </div>
            </div>

            <div class="guayaochi">
                <div class="title">【卦辞】</div>
                <ui class="content">
                    <li class="li">{{benGua.content.guaci}}</li>
                </ui>
                <div class="title">【爻辞】</div>
                <ui class="content">
                    <li class="li" v-for="v in benGua.content.yaoci" v-html="splityaoci(v)"></li>
                </ui>
            </div>
            <div class="paipan-btn-block">
                <div class="paipan-btn" @click="showCustomGua">手动起卦</div>
                <div class="paipan-btn" @click="init">刷新时间卦</div>
            </div>

        </div>


        <!--自定义起卦-->
        <div class="custom-gua" id="customGuaObj" :class="isCustomGua" @click="hideCustomGua">
            <div class="custom-gua-block">
                <div class="custom-gua-tools">
                    <span class="custom-gua-btn" @click="setCustomGua">确定</span>
                </div>
                <div class="custom-title">上卦</div>
                <div class="custom-sg">
                    <span class="icon-gua" @click="setBs(1,0)" :class="sgBs==0?'on':''">&#xe601;</span>
                    <span class="icon-gua" @click="setBs(1,1)" :class="sgBs==1?'on':''">&#xe602;</span>
                    <span class="icon-gua" @click="setBs(1,2)" :class="sgBs==2?'on':''">&#xe603;</span>
                    <span class="icon-gua" @click="setBs(1,3)" :class="sgBs==3?'on':''">&#xe604;</span>
                    <span class="icon-gua" @click="setBs(1,4)" :class="sgBs==4?'on':''">&#xe605;</span>
                    <span class="icon-gua" @click="setBs(1,5)" :class="sgBs==5?'on':''">&#xe606;</span>
                    <span class="icon-gua" @click="setBs(1,6)" :class="sgBs==6?'on':''">&#xe607;</span>
                    <span class="icon-gua" @click="setBs(1,7)" :class="sgBs==7?'on':''">&#xe608;</span>
                </div>
                <div class="custom-title">上卦</div>
                <div class="custom-xg">
                    <span class="icon-gua" @click="setBs(2,0)" :class="xgBs==0?'on':''">&#xe601;</span>
                    <span class="icon-gua" @click="setBs(2,1)" :class="xgBs==1?'on':''">&#xe602;</span>
                    <span class="icon-gua" @click="setBs(2,2)" :class="xgBs==2?'on':''">&#xe603;</span>
                    <span class="icon-gua" @click="setBs(2,3)" :class="xgBs==3?'on':''">&#xe604;</span>
                    <span class="icon-gua" @click="setBs(2,4)" :class="xgBs==4?'on':''">&#xe605;</span>
                    <span class="icon-gua" @click="setBs(2,5)" :class="xgBs==5?'on':''">&#xe606;</span>
                    <span class="icon-gua" @click="setBs(2,6)" :class="xgBs==6?'on':''">&#xe607;</span>
                    <span class="icon-gua" @click="setBs(2,7)" :class="xgBs==7?'on':''">&#xe608;</span>
                </div>
                <div class="custom-title">动爻</div>
                <div class="custom-dy">
                    <span class="icon-gua" @click="setBs(3,0)" :class="dyBs==0?'on':''">&#xe601;</span>
                    <span class="icon-gua" @click="setBs(3,1)" :class="dyBs==1?'on':''">&#xe602;</span>
                    <span class="icon-gua" @click="setBs(3,2)" :class="dyBs==2?'on':''">&#xe603;</span>
                    <span class="icon-gua" @click="setBs(3,3)" :class="dyBs==3?'on':''">&#xe604;</span>
                    <span class="icon-gua" @click="setBs(3,4)" :class="dyBs==4?'on':''">&#xe605;</span>
                    <span class="icon-gua" @click="setBs(3,5)" :class="dyBs==5?'on':''">&#xe606;</span>
                </div>
            </div>
        </div>
    </div>

</template>

<script>
    export default {
        data: function () {
            return {
                hour: 0,
                minu: 0,
                benGua: {},
                bianGua: {},
                ganZhi: {},
                huGua: {},
                initDate: new Date(),
                iscomputeTime: true,
                isCustomGua: '',
                sgBs: 9,
                xgBs: 9,
                dyBs: 9,
                guaType:'time'
            }
        },
        computed: {
            dateStr: function () {
                var str = "";
                var month = this.initDate.getMonth() + 1
                var day = this.initDate.getDate();
                var h = this.initDate.getHours();
                var m = this.initDate.getMinutes();
                month = month < 10 ? "0" + month : month;
                day = day < 10 ? "0" + day : day;
                h = h < 10 ? "0" + h : h;
                m = m < 10 ? "0" + m : m;
                str += this.initDate.getFullYear() + "-";
                str += month + "-";
                str += day + " ";
                str += h + ":";
                str += m;
                return str;
            }
        },
        methods: {
            init: function () {
                //设置时间卦
                this.initDate = new Date();
                var date = this.initDate;
                var y = date.getFullYear();
                var m = date.getMonth() + 1;
                var d = date.getDate();
                var h = date.getHours();
                this.timeGua(y, m, d, h);
                this.guaType='时间起卦';
            },

            timeGua: function (y, m, d, h) {
                var obj = calendar.solar2lunar(y, m, d, h), shangGua, xiaGua, dongYao, bianGua;
                this.ganZhi = obj;
                y = calendar.Zhi.indexOf(obj.gzYear.substr(1, 1)) + 1;
                m = obj.lMonth;
                d = obj.lDay;
                h = calendar.Zhi.indexOf(obj.gzHour.substr(1, 1)) + 1;
                shangGua = (y + m + d) % 8 == 0 ? 8 : (y + m + d) % 8;
                xiaGua = (y + m + d + h) % 8 == 0 ? 8 : (y + m + d + h) % 8;
                dongYao = (y + m + d + h) % 6 == 0 ? 6 : (y + m + d + h) % 6;
                this.getGua(shangGua, xiaGua, dongYao);
            },

            getGua: function (shangGua, xiaGua, dongYao) {
                //计算卦
                var code, tmp;
                var bianGua = GUA.G8[dongYao > 3 ? shangGua : xiaGua];
                code = bianGua.code.toString();


                if (dongYao == 1 || dongYao == 4) {
                    tmp = code[2];
                    if (tmp == 0) tmp = 1; else tmp = 0;
                    code = code[0] + "" + code[1] + "" + tmp;
                }
                if (dongYao == 2 || dongYao == 5) {
                    tmp = code[1];
                    if (tmp == 0) tmp = 1; else tmp = 0;
                    code = code[0] + "" + tmp + "" + code[2];
                }
                if (dongYao == 3 || dongYao == 6) {
                    tmp = code[0];
                    if (tmp == 0) tmp = 1; else tmp = 0;
                    code = tmp + "" + code[1] + "" + code[2];
                }

                for (var k in GUA.G8) {
                    if (code == GUA.G8[k].code) {
                        bianGua = k;
                        break;
                    }
                }

                var benGuaStr = GUA.G64[shangGua + "" + xiaGua].title, bianGuaStr;
                console.log(this.benGua.title,GUA.G64[shangGua + "" + xiaGua].title);
                this.benGua.title = benGuaStr.indexOf('为') < 0 ? benGuaStr.substr(2, benGuaStr.length) : benGuaStr.substr(0, 1);

                //if (!this.benGua.title || this.benGua.title.length > 2)  this.benGua.title = benGuaStr.indexOf('为') < 0 ? benGuaStr.substr(2, benGuaStr.length) : benGuaStr.substr(0, 1);

                this.benGua.hua = "&#xe6" + shangGua + xiaGua + ";";
                this.benGua.content = GUA.G64[shangGua + "" + xiaGua].content;

                this.huGua = this.getHugua(GUA.G64[shangGua + "" + xiaGua].code);
                if (this.huGua.title.length > 2) this.huGua.title = this.huGua.title.indexOf('为') < 0 ? this.huGua.title.substr(2, this.huGua.title.length) : this.huGua.title.substr(0, 1);


                if (dongYao < 4) {
                    bianGuaStr = GUA.G64[shangGua + "" + bianGua].title;
                    this.bianGua.hua = "&#xe6" + shangGua + bianGua;
                } else {
                    bianGuaStr = GUA.G64[bianGua + "" + xiaGua].title;
                    this.bianGua.hua = "&#xe6" + bianGua + xiaGua + ";";
                }
                this.bianGua.title = bianGuaStr.indexOf('为') < 0 ? bianGuaStr.substr(2, bianGuaStr.length) : bianGuaStr.substr(0, 1);
            },

            setCustomGua: function () {
                if (this.sgBs == 9) {
                    plus.nativeUI.alert('请选择上卦');
                    return;
                }
                if (this.xgBs == 9) {
                    plus.nativeUI.alert('请选择下卦');
                    return;
                }
                if (this.dyBs == 9) {
                    plus.nativeUI.alert('请选择动爻');
                    return;
                }
                this.getGua(this.sgBs + 1, this.xgBs + 1, this.dyBs + 1);
                this.sgBs = this.xgBs = this.dyBs = 9;
                this.isCustomGua = '';
                this.guaType="手动起卦";
            },

            getHugua: function (code) {
                code = code.toString();
                var sg, xg;
                sg = code.substr(1, 3);
                xg = code.substr(2, 3);
                for (var i in GUA.G8) {
                    if (GUA.G8[i].code == sg) {
                        sg = i;
                    }
                    if (GUA.G8[i].code == xg) {
                        xg = i;
                    }
                }
                return GUA.G64[sg + "" + xg];
            },
            splityaoci: function (str) {
                var tmpstr = [str.substr(0, 2), str.substr(3, str.length)];
                return '<span class="field">' + tmpstr[0] + ':</span><span class="fieldvalue">' + tmpstr[1] + '</span>';
            },
            showCustomGua: function () {
                this.isCustomGua = 'on';
            },
            hideCustomGua: function (event) {
               if (event.target.id == event.currentTarget.id) {
                    this.isCustomGua = '';
                    this.sgBs = this.xgBs = this.dyBs = 9;
                }
            },
            setBs: function (mode, index) {
                if (mode == 1) {
                    this.sgBs = index;
                } else if (mode == 2) {
                    this.xgBs = index;
                } else {
                    this.dyBs = index;
                }
            }
        },
        created: function () {
            this.init();
        }
    }
</script>

